<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				width: 700px;
			}
			/* 这个指令是页面选择器，有这个属性就执行这个样式*/
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<h3>姓名（单值）、年龄（单值）、爱好（数组）、女朋友（对象）、豪车（对象数组）</h3>
		<div id="app" v-cloak>
			<div>我的信息</div>
			{{name}}、{{age+"岁"}}
			<hr >
			<h5>我的爱好</h5>
			{{hobby}}、{{hobby[0]}}、{{hobby.length}}、{{hobby[hobby.length-1]}}
			<hr >
			<h5>我的女朋友</h5>
			{{girl.name}}、{{girl.age+"岁"}}
			<hr >
			<h5>我的豪车</h5>
			{{"第一辆豪车："+cars[0].name+"，颜色："+cars[0].color}}<br />
			{{"第二辆豪车："+cars[1].name+"，颜色："+cars[1].color}}<br />
			{{"第三辆豪车："+cars[2].name+"，颜色："+cars[2].color}}<br />
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"hello VueJS!",
				name:"程子豪",  //字符串类型两边使用双引号或者单引号括起来
				age:24,  //整数不需要括起来，直接写
				hobby:["乒乓球","爬山","唱歌"],  //字符串数组
				girl:{
					name:"申晓菲",
					age:"18"
				},
				cars:[
						{name:"劳斯莱斯",color:"白色"},
						{name:"奔驰",color:"红色"},
						{name:"宝马",color:"绿色"},
					]
			}
		});
	</script>
</html>
